import React from 'react';
import { connect } from 'dva';
import { Form, Modal, Input } from 'antd';
import styles from './index.less';
import Flex from '../components/flexBox';
import Header from '../components/header';
import MenuBar from '../components/menu';
import Footer from '../components/footer';
import MyToggleBtn from '../components/myToggleBtn';
import Bread from '../components/bread';
import { defaultFormItemLayout } from '../components/modalForm';

const logo = require('../assets/img/logo.png');

const FormItem = Form.Item;
const create = Form.create;

function Home({ children, app, dispatch, left, form }) {
    const { menu, openKey, user = {}, keyPath = ['store', 'home'], changeInfo, pwV } = app;
    const { name, userName } = user || {};
    const { getFieldDecorator: gfd, validateFields: vf } = form;
    // const notReady = () => {
    //     message.warning('功能暂不开放！');
    // };
    const cInfo = (changeInfo = true) => {
        dispatch({
            type: 'app/upState',
            payload: { changeInfo },
        });
    };
    const changeAdminInfo = () => {
        vf((err, val) => {
            if (!err) {
                dispatch({
                    type: 'app/updatePersonalInfo',
                    payload: val,
                });
            }
        });
    };
    const changePW = (pwV = true) => {
        dispatch({
            type: 'app/upState',
            payload: { pwV },
        });
    };
    const changePWSubmit = () => {
        console.log('safvn');
        vf((err, val) => {
            // if (!err) {
            console.log('12');
            dispatch({
                type: 'app/changePassword',
                payload: val,
            });
            // }
        });
        console.log('qe');
    };
    const jump = (args) => {
        dispatch({
            type: 'app/jump',
            payload: args,
        });
    };
    const onOpenChange = (value) => {
        const openKey = value.length > 0 ? value[1] : '';
        dispatch({
            type: 'app/upState',
            payload: { openKey },
        });
    };
    const mode = left ? 'inline' : 'vertical';
    const menuWidth = left ? 200 : 60;
    const logout = () => {
        dispatch({
            type: 'app/logout',
        });
    };
    const prop = {
        vertical: false,
        header: (
            <Header
//              username={`${roleName} ${name}`}
                username={`${userName} ${name}`}
                dispatch={dispatch}
                logout={logout}
                changePassword={changePW.bind(null, true)}
                updatePersonalInfo={cInfo.bind(null, true)}
            />
        ),
        toggleBtn: {
            btn: MyToggleBtn,
            topMove: '44px',
            sideMove: '-32px',
            baseStyle: {
                background: 'transparent',
                borderRadius: 0,
                boxShadow: 'none'
            },
        },
        left: (
            <div className={styles.leftBar}>
                <div className={styles.logo}>
                    <img src={logo} />
                    {left ? <span>KAKA_VR 店铺</span> : null}
                </div>
                <div className={styles.fixBottom}>
                    <MenuBar
                        data={menu}
                        width={menuWidth}
                        openKeys={[openKey]}
                        onOpenChange={onOpenChange}
                        selectedKeys={[keyPath[0]]}
                        onItemClick={jump}
                        mode={mode}
                    />
                </div>
                <Footer
                    copy="copyrights &copy; 2017"
                />
            </div>
        ),
        footerHeight: 32,
    };
    return (
        <Flex
            {...prop}
        >
            <Bread
                keyPath={keyPath}
                menu={menu}
            />
            <div className={styles.wrap}>
                {children}
            </div>
            <Modal
                visible={changeInfo}
                title="绑定支付宝账号"
                onCancel={cInfo.bind(null, false)}
                onOk={changeAdminInfo}
            >
                <Form>
                    <FormItem
                        label="支付宝账号"
                        {...defaultFormItemLayout}
                    >
                        {gfd('alipay', {
                            rules: [
                                { required: true, message: '必填项' }
                            ],
                        })(<Input placeholder="请输入要绑定的支付宝账号" type="text" />)}
                    </FormItem>
                </Form>
            </Modal>
            <Modal
                visible={pwV}
                title="修改密码"
                onCancel={changePW.bind(null, false)}
                onOk={changePWSubmit}
            >
                <Form>
                    <FormItem
                        label="当前密码"
                        {...defaultFormItemLayout}
                    >
                        {gfd('old', {
                            rules: [
                                { required: true, message: '必填项' }
                            ],
                        })(<Input placeholder="请输入当前密码" type="password" />)}
                    </FormItem>
                    <FormItem
                        label="新密码"
                        {...defaultFormItemLayout}
                    >
                        {gfd('newPw', {
                            rules: [
                                { required: true, message: '必填项' }
                            ],
                        })(<Input placeholder="请输入新密码" type="password" />)}
                    </FormItem>
                    <FormItem
                        label="重复新密码"
                        {...defaultFormItemLayout}
                    >
                        {gfd('rePw', {
                            rules: [
                                { required: true, message: '必填项' }
                            ],
                        })(<Input placeholder="请重复输入新密码" type="password" />)}
                    </FormItem>
                </Form>
            </Modal>
        </Flex>
    );
}

function mapStateToProps({ app, flex: { visible: { left } } }) {
    return { app, left };
}

export default connect(mapStateToProps)(create()(Home));
